<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 蜗牛影院系统——影院管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form :model="query" :inline="true">
                    <el-form-item label="影院名:">
                        <el-input v-model="query.name"  class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                type="primary"
                                icon="el-icon-search"
                                @click="handleSearch()"
                        >搜索</el-button>
                    </el-form-item>
                    <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            class="handle-select"
                            @click="handlerefresh()"
                    >刷新列表</el-button>
                </el-form>

                <p/>

                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        class="handle-select"
                        @click="handleadd()"
                >影院入驻</el-button>
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="handleDelete()"
                >影院撤驻</el-button>
            </div>

            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" align="center" width="50px" ></el-table-column>
                <el-table-column prop="cinemaid" label="影院ID" align="center" width="100px"></el-table-column>
                <el-table-column prop="cinemaname" label="影院名称" align="center"></el-table-column>
                <el-table-column prop="cinemaphone" label="联系电话" align="center"></el-table-column>
                <el-table-column prop="cinemaarea" label="所属区域" align="center"></el-table-column>
                <el-table-column prop="cinemaaddress" label="详细地址" align="center"></el-table-column>
                <el-table-column label="影院图片" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                :src="scope.row.cinemaimg"
                                :preview-src-list="[scope.row.cinemaimg]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="cinemalng" label="经度" align="center" v-if="hideRow"></el-table-column>
                <el-table-column prop="cinemalat" label="纬度" align="center" v-if="hideRow"></el-table-column>
                <el-table-column label="操作" width="250px" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-location"
                                @click="handleBtnQueryMap(scope.$index, scope.row)"
                        >地图查看</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="singleDelete(scope.$index, scope.row)"
                        >撤驻</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="query.currentPage"
                        :page-sizes="[15, 30, 50, 100]"
                        :page-size="query.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="currentTotal"
                ></el-pagination>
            </div>
        </div>

        <!-- 入驻弹出框 -->
        <el-dialog title="添加影院" :visible.sync="addVisible" width="30%">
            <el-form
                    ref="addform"
                    :model="addform"
                    label-width="70px"
                    :rules="rules">
                <el-col>
                    <el-form-item
                            label="影院名称"
                            label-width="80px">
                        <el-input
                                v-model="addform.cinemaname"
                                placeholder="请输入影院名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="联系电话"
                            label-width="80px">
                        <el-input
                                v-model="addform.cinemaphone"
                                placeholder="请输入影院联系电话"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="所属区域"
                            label-width="80px">
                        <el-select v-model="addform.cinemaarea" placeholder="请选择区域">
                            <el-option value="浦东新区" >浦东新区</el-option>
                            <el-option value="杨浦区">杨浦区</el-option>
                            <el-option value="宝山区">宝山区</el-option>
                            <el-option value="崇明区">崇明区</el-option>
                            <el-option value="嘉定区">嘉定区</el-option>
                            <el-option value="青浦区">青浦区</el-option>
                            <el-option value="金山区">金山区</el-option>
                            <el-option value="闵行区">闵行区</el-option>
                            <el-option value="黄浦区">黄浦区</el-option>
                            <el-option value="卢湾区">卢湾区</el-option>
                            <el-option value="徐汇区">徐汇区</el-option>
                            <el-option value="长宁区">长宁区</el-option>
                            <el-option value="静安区">静安区</el-option>
                            <el-option value="普陀区">普陀区</el-option>
                            <el-option value="闸北区">闸北区</el-option>
                            <el-option value="虹口区">虹口区</el-option>
                            <el-option value="奉贤区">奉贤区</el-option>
                            <el-option value="松江区">松江区</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="详细地址"
                            label-width="80px">
                        <el-input
                                v-model="addform.cinemaaddress"
                                placeholder="请填写详细地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="影院图集"
                            label-width="80px">
                        <el-input
                                v-model="addform.cinemaimg"
                                placeholder="请上传影院图片"
                                type="file"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd()">确 定</el-button>
            </span>
        </el-dialog>

        <!--编辑弹出框-->
        <el-dialog title="编辑影院" :visible.sync="editVisible" width="60%">
            <el-form ref="form" :model="editform" label-width="50px">
                <el-form-item label="影院编号">
                    <el-input v-model="editform.cinemaid" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="影院名称">
                    <el-input v-model="editform.cinemaname"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="editform.cinemaphone"></el-input>
                </el-form-item>
                <el-form-item label="所属区域">
                    <el-input v-model="editform.cinemaarea"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="editform.cinemaaddress"></el-input>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="editform.cinemalng" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="editform.cinemalat" readonly="true"></el-input>
                </el-form-item>
                <el-table-column label="影院图片" align="center">
                    <el-image
                            class="table-td-thumb"
                            :src="editform.cinemaimg"
                            :preview-src-list="[editform.cinemaimg]"
                    ></el-image>
                </el-table-column>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmedit()">确 定</el-button>
            </span>
        </el-dialog>


        <!--地图弹出框-->
        <el-dialog title="影院地图" :visible.sync="mapVisible" width="80%">
            <el-table
                    :data="baimap"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    >
                <el-table-column
                        prop="cinemaname"
                        label="影院名称"
                        align="center"
                        readonly="true">
                </el-table-column>
                <el-table-column
                        prop="cinemalng"
                        label="经度"
                        align="center" readonly="true">
                </el-table-column>
                <el-table-column
                        prop="cinemalat"
                        label="纬度"
                        align="center" readonly="true">
                </el-table-column>
                <el-table-column
                        prop="cinemaarea"
                        label="所属区域"
                        align="center" readonly="true">
                </el-table-column>
                <el-table-column
                        prop="cinemaaddress"
                        label="详细地址"
                        align="center" readonly="true">
                </el-table-column>
            </el-table>

            <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
                <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                <bm-marker :position="center" :dragging="true">
                    <bm-info-window :show="show">{{baimap.cinemaname}}</bm-info-window>
                </bm-marker>
            </baidu-map>
        </el-dialog>


    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    name: 'Cinema',
    data() {
        return {
            query: {
                name:'',
                currentPage:'',
                pageSize:''
            },
            center: {lng: 0, lat: 0},
            zoom: 3,
            cinemaareas:[],
            tableData: [],
            multipleSelection: [],
            delList: [],
            currentTotal: '',
            editVisible: false,
            addVisible:false,
            cinemaareas:'',
            pageTotal: 0,
            editform:{
                cinemaid:'',
                cinemaname:'',
                cinemaphone:'',
                cinemaarea:'',
                cinemaaddress:'',
                cinemalng:'',
                cinemalat:'',
                cinemaimg:'',
            },
            baimap:[],
            addform:{
                cinemaname:'',
                cinemaphone:'',
                cinemaarea:'',
                cinemaaddress:'',
                cinemaimg:'',
            },
            form: {},
            idx: -1,
            id: -1,
            mapVisible:false,
            show: false,
        };
    },
    created() {
        this.axios.get("api/cinemaDTO/cinemalist",null).then((data)=>{
            this.tableData = data.data.pageInfo.list;
            this.currentTotal = data.data.pageInfo.total;
            this.query.pageSize = data.data.pageInfo.pageSize;
            this.query.currentPage = data.data.pageInfo.pageNum;

        })
    },
    methods: {
        handlerefresh(){
            this.axios.get("api/cinemaDTO/cinemalist",null).then((data)=>{
                this.tableData = data.data.pageInfo.list;
                this.query.name = '';
                this.currentTotal = data.data.pageInfo.total;
                this.query.pageSize = data.data.pageInfo.pageSize;
                this.query.currentPage = data.data.pageInfo.pageNum;
            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.goList();
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 删除影院操作（撤驻）
        handleDelete() {
            const length = this.multipleSelection.length;
            let str = '';
            //this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].cinemaid + ' ';
            }
            if(str == null || str == '' ){
                this.$message.error(`请先勾选影院（可批量撤销入驻）`);
            }else{
                this.axios
                    .get("api/cinemaDTO/delcinemas",{params:{str:str}})
                    .then((data)=>{
                    if(data.data>0){
                        alert(`影院已经成功从平台撤销`);
                        this.multipleSelection = [];
                        this.handlerefresh();
                    }else{
                        alert(`影院撤销失败，请重试！`);
                        this.multipleSelection = [];
                        this.handlerefresh();
                    }
                })
            }
        },

        //添加操作，加载影院区域选择
        handleadd(){
            this.addVisible = true;
        },

        // 确认添加
        confirmAdd(){
            this.axios
                .post("api/cinemaDTO/addcinema",JSON.stringify(this.addform))
                .then((data)=>{
                if(data.data == 1){
                    alert("添加影院成功！")
                    this.addform ='';
                    this.addVisible = false;
                    this.handlerefresh();
                }else{
                    alert("添加影院失败，请重试！")
                    this.handlerefresh();
                }
            })
        },

        // 修改编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.editform = row;
            this.editVisible = true;
        },

        // 确认修改
        confirmedit(){
            this.axios.post("api/cinemaDTO/editcinema",JSON.stringify(this.editform)).then((data)=>{
                if(data.data == 1){
                    alert("影院信息修改成功！")
                    this.editform ='';
                    this.editVisible = false;
                }else{
                    alert("修改影院信息失败，请重试！")
                }
            })
        },

        //单个影院删除id
        singleDelete(index, row){
            var id = row.cinemaid;
            this.axios
                .get("api/cinemaDTO/delcinema",{params:{id:id}})
                .then((data)=>{
                if(data.data>0){
                    alert(`影院已经成功从平台撤销`);
                    this.handlerefresh();
                }else{
                    alert(`影院撤驻失败，请重试！`);
                    this.handlerefresh();
                }
            })
        },

        // 分页导航
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.goList();
        },
        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.goList();
        },


        //地图查看
        handleBtnQueryMap(index,row){
            this.idx = index;
            this.baimap[0] = row;
            console.log(this.baimap)
            this.mapVisible = true;
            this.center.lng = row.cinemalng;
            this.center.lat = row.cinemalat;
            var point = new BMap.Point(this.center.lng,this.center.lat);// 创建点坐标
            this.zoom = 15;
            this.baimap.centerAndZoom(point,zoom);

        },
        //坐标点展示
        infoWindowClose () {
            this.show = false;
        },
        infoWindowOpen () {
            this.show = true;
        },

        handler ({BMap, map}) {
            // console.log(BMap, map)
            // this.center.lng = x
            // this.center.lat = y
            // this.zoom = 15
        },

        //封装的方法
        goList(){
            this.axios.get("api/cinemaDTO/cinemalist",{params:this.query}).then((data)=>{
                this.tableData = data.data.pageInfo.list;
                this.query.name = data.data.name;
                this.currentTotal = data.data.pageInfo.total;
                this.query.pageSize = data.data.pageInfo.pageSize;
                this.query.currentPage = data.data.pageInfo.pageNum;
            })
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.map {
    width: 100%;
    height: 400px;
}
</style>

